<template>
  <div v-title="'订单列表 - 世外票务云平台'">
    <mk-breadcrumb :is-return="false" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="MkOrderCenter globalTabsStyle">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="待验票" name="Wait_Check"></el-tab-pane>
      <el-tab-pane label="已验票" name="Checked"></el-tab-pane>
      <el-tab-pane label="待支付" name="WaitPay"></el-tab-pane>
      <el-tab-pane label="已退票" name="Refund"></el-tab-pane>
      <el-tab-pane label="已关闭" name="Closed"></el-tab-pane>
    </el-tabs>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightBig)+'px'}]">
    <mk-order-list :active-name="activeName"></mk-order-list>
    </el-scrollbar>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import MkOrderList from './orderList.vue'
  import {mapState} from 'vuex'
  export default {
    name: 'MkChangeTicket',
    components: {
      MkBreadcrumb, MkOrderList
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightBig: state => state.global.fixedHeightBig,
    }),
    methods: {
      handleClick() {

      }
    },
    mounted: function() {

    },
    data () {
      return {
        activeName: 'all',
        breadcrumbData: {
          list: {
            first: {name: '票务管理',path: null, isClickAble: false},
            second: {name: '订单列表',path: null,isClickAble: false}
          },
          menuIconStyle : 'ticketIconStyle'
        }
      }
    }
  }
</script>
<style lang="less">
  .MkOrderCenter{
    margin-top:-10px;
  }
</style>
